.pink {
  color: #c72c8b;
}
.red {
  color: #ff0000;
}
.yellow {
  color: #e9ea05;
}
// 青色
.Cyan {
  color: #99eff4;
}
//藏青色{
.teal {
  color: #1c7997;
}
// 鼠标手势
.pointer {
  cursor: pointer;
}
// 行内块元素
.inline {
  display: inline-block;
}
// flex布局
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
//超出换行
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
// 边框
.border(@color:red) {
  box-sizing: border-box;
  border: 1px solid @color;
}
.bgImg(@width:823.3px,@height:433.3px,@count:'1-1') {
  width: @width;
  height: @height;
  background: url('~@/assets/images/@{count}.png') no-repeat;
  background-size: @width @height;
  background-position: 0 0;
}
.absolute(@left:100px,@top:100px) {
  position: absolute;
  left: @left;
  top: @top;
}
.text(@width:686px,@height:45px,@size:46px,@color:rgba(253, 253, 253, 1)) {
  width: @width;
  height: @height;
  font-size: @size;
  font-family: SimHei;
  font-weight: 400;
  color: @color;
}

.container {
  width: 100%;
  height: 100%;
  background: url('~@/assets/images/bg.jpg') no-repeat fixed center / cover;
  .header-con {
    .bgImg(3200px, 183.3px, 'header_icon');
    display: flex;

    // 左边标题
    .left-con {
      width: 1038px;
      height: 153.3px;
      .top-con {
        margin: 67px 0 0 338px;
        left: 338px;
        top: 67px;
        .title {
          font-size: 27px;
          font-family: SimSun;
          font-weight: 400;
        }
        .title:not(:first-child) {
          margin-left: 35px;
        }
      }
      //下半部分
      .bottom-con {
        margin: 25px 0 0 314px;
        .title {
          display: inline-block;
          width: 797px;
          height: 27px;
          font-size: 27px;
          font-family: SimHei;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
    //中间大标题
    .center-con {
      width: 1127px;
      height: 183px;
      overflow: hidden;
      position: relative;
      .title {
        position: absolute;
        top: 61px;
        left: 160px;
        font-size: 60px;
        font-family: SimHei;
        font-weight: 400;
        color: rgba(253, 253, 253, 1);
      }
    }
    // 右侧容器
    .right-con {
      width: 1035px;
      height: 153.3px;
      position: relative;
      .item-con {
        width: 207px;
        height: 65px;
        position: absolute;
        top: 50px;
        .title {
          font-size: 30px;
          font-family: SimHei;
          font-weight: 400;
          white-space: nowrap;
        }
      }
      .item-con:nth-child(3) {
        right: 209px;
      }
      .item-con:nth-child(2) {
        right: 544px;
      }
      .item-con:nth-child(1) {
        right: 853px;
      }
    }
  }
  // 内容容器
  .content-con {
    width: 100%;
    height: 1500px;
    // .border();
    .main-con {
      width: calc(100% -207px);
      height: calc(1615px - 124px);
      margin: 62px auto;
      display: flex;
      .left-con,
      .right-con {
        width: 823.3px;
        .container1 {
          .bgImg();
        }
        .container1:nth-child(3) {
          .bgImg(823.3px, 500px);
          overflow: hidden;
        }
        .container1:not(:first-child) {
          margin-top: 69px;
        }
      }
      .left-con {
        .container1 {
          position: relative;
          .title {
            .text(240px, 25px, 25px, rgba(255, 255, 255, 0.7));
            .absolute(65px, 24px);
          }
          .icon-con2 {
            .absolute(472px, 24px);
          }
          .title1 {
            .absolute(60px, 24px);
          }
          .title2 {
            .absolute(500px, 24px);
          }
        }
        .charts-con {
          width: 100%;
          height: calca(500px - 95px);
          margin-top: 60px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-wrap: wrap;
          .chart {
            width: 33.333%;
            height: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            .title {
              position: absolute;
              bottom: 5px;
              left: 110px;
              top: auto;
              color: #ddd;
            }
          }
          .chart:nth-child(2) {
            width: 6%;
          }
          .chart:nth-child(1),
          .chart:nth-child(3) {
            width: 47%;
          }
          .chart:nth-child(4) {
            background: url('~@/assets/images/zise.png') no-repeat;
            background-size: 130px 130px;
            background-position: 70px 35px;
          }
          .chart:nth-child(5) {
            background: url('~@/assets/images/huangse.png') no-repeat;
            background-size: 130px 130px;
            background-position: 70px 35px;
          }
          .chart:nth-child(6) {
            background: url('~@/assets/images/lanse.png') no-repeat;
            background-size: 130px 130px;
            background-position: 60px 35px;
            .title{
              left:100px;
            }
          }
          .min-chart {
            width: 200px;
            height: 119px;
            // .border();
          }
          #chart1,
          #chart3 {
            width: 100%;
            height: 100%;
          }
          #chart2 {
            height: 100%;
            .top,
            .bottom {
              width: 100%;
              height: 50%;
              display: flex;
              justify-content: center;
              flex-direction: column;
              align-items: center;
            }
            img {
              width: 21.7px;
              height: 21.7px;
            }
            .zhengchang {
              .text(40px, 18px, 17px, rgba(28, 182, 226, 1));
              margin-top:10px;
            }
            .yichang {
              .text(40px, 18px, 17px, rgba(28, 182, 226, 1));
              margin-top:10px;
            }
          }
        }
      }
      .center-con {
        width: 1246.7px;
        margin-left: 50px;
        .top-con {
          width: 100%;
          height: 178.3px;
          display: flex;
          justify-content: space-between;
          .container1 {
            .bgImg(400px, 178.3px);
          }
        }
        .bottom-con {
          width: 1246.7px;
          height: 1270px;
          margin-top: 53px;
          position: relative;
          overflow: hidden;
          .bgImg(1246.7px, 1270px, '2-2');
          .title-con {
            overflow: hidden;
            .icon-con {
              top: 70px;
            }
            .title {
              display: inline-block;
              margin: 64px 0 0 60px;
              .text(456px, 37px, 36px, #7f7f7f);
            }
            .count {
              display: inline-block;
              width: 55px;
              height: 71px;
              margin-left: 13px;
              .bgImg(55px, 71px, 'count');
              display: inline-flex;
              justify-content: center;
              align-items: center;
              .text(55px, 71px, 60px, rgba(153, 239, 244, 1));
            }
            .title:last-child {
              color: #ddd;
            }
          }
          .real-con {
            .bgImg(1233px, 789px, 'real');
            margin: auto;
            margin-top: 13px;
            border-radius: 8px;
          }
          .manage-con {
            margin-top: 67px;
            width: 1246.7px;
            height: 235px;
            display: flex;
            justify-content: space-around;
            .container1 {
              .bgImg(200px, 235px);
            }
          }
        }
      }
      .right-con {
        margin-left: 50px;
        .birthday {
          position: relative;
          .title {
            .absolute(65px, 22px);
            .text(681px, 58px, 60px);
          }
          .p1 {
            .absolute(193px, 164px);
            .text(125px, 62px, 60px, rgba(199, 44, 139, 1));
          }
          .p2 {
            .absolute(197px, 271px);
            .text(125px, 60px, 60px);
          }
          .p3 {
            position: absolute;
            right: 133px;
            top: 168px;
            .text(230px, 62px, 60px, rgba(199, 44, 139, 1));
          }

          .p4 {
            position: absolute;
            right: 80px;
            top: 275px;
            .text(320px, 48px, 50px);
          }
        }
        .activity {
          position: relative;
          .title {
            .absolute(65px, 23px);
            .text(686px, 45px, 45px);
          }
          .p1 {
            .absolute(156px, 153px);
            .text(165px, 62px, 60px, rgba(9, 239, 244, 1));
          }
          .p2 {
            .absolute(156px, 261px);
            .text(170px, 60px, 55px);
          }
          .p3 {
            position: absolute;
            right: 150px;
            top: 153px;
            .text(230px, 62px, 60px, rgba(9, 239, 244, 1));
          }

          .p4 {
            position: absolute;
            right: 80px;
            top: 259px;
            .text(320px, 48px, 50px);
          }
        }
        .quan {
          position: relative;
          .title {
            .absolute(65px, 22px);
            .text(250px, 28px, 30px, rgba(253, 253, 253, 0.5));
          }
          .icon-pre {
            .absolute(28px, 236px);
            .bgImg(22px, 44px, 'pre');
            cursor: pointer;
            z-index: 99999999999;
          }
          .icon-next {
            .absolute(785px, 236px);
            .bgImg(22px, 44px, 'next');
            z-index: 99999999999;
            cursor: pointer;
          }
          .bottom-con {
            width: 100%;
            .absolute(0, 51px);
            height: calc(100% - 51px);
          }
        }
      }
    }
  }
  i.icon-con {
    position: absolute;
    left: 28px;
    top: 27px;
    .bgImg(15px, 20px, 'icon');
  }
  .chart-con {
    width: 100%;
    height: 100%;
  }
}
